import  { useState, useEffect } from 'react';

const FeedbackForm = () => {
    const [feedback, setFeedback] = useState('');
    const [rating, setRating] = useState(0);
    const [file, setFile] = useState(null);
    const [isAnonymous, setIsAnonymous] = useState(false);
    const [confirmation, setConfirmation] = useState('');
    const [suggestions, setSuggestions] = useState([]);

    useEffect(() => {
        // 模拟获取用户历史行为数据并生成个性化建议
        const userHistory = [
            '应用程序崩溃',
            '无法登录',
            '界面卡顿'
        ];
        setSuggestions(userHistory);
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        // 模拟提交反馈
        setConfirmation('感谢您的反馈！');
        setFeedback('');
        setRating(0);
        setFile(null);
        setIsAnonymous(false);
    };

    return (
        <form onSubmit={handleSubmit} className="p-6 bg-white rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-4">提交反馈</h2>
            <textarea
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                placeholder="请输入您的反馈"
                className="w-full p-2 mb-4 border border-gray-300 rounded"
            />
            <div>
                <label className="block mb-2">评分:</label>
                <input
                    type="number"
                    value={rating}
                    onChange={(e) => setRating(e.target.value)}
                    min="1"
                    max="5"
                    className="w-full p-2 border border-gray-300 rounded"
                />
            </div>
            <div>
                <label className="block mb-2">上传图片/视频:</label>
                <input
                    type="file"
                    onChange={(e) => setFile(e.target.files[0])}
                    className="w-full p-2 border border-gray-300 rounded"
                />
            </div>
            <div className="mb-4">
                <label className="block mb-2">匿名提交:</label>
                <input
                    type="checkbox"
                    checked={isAnonymous}
                    onChange={(e) => setIsAnonymous(e.target.checked)}
                    className="mr-2"
                />
                匿名
            </div>
            <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
                提交
            </button>
            {confirmation && <p className="mt-4 text-green-500">{confirmation}</p>}
            {suggestions.length > 0 && (
                <div className="mt-4">
                    <h3 className="text-xl font-bold mb-2">常见问题:</h3>
                    <ul className="list-disc list-inside">
                        {suggestions.map((suggestion, index) => (
                            <li key={index}>{suggestion}</li>
                        ))}
                    </ul>
                </div>
            )}
        </form>
    );
};

export default FeedbackForm;

/*有接口*/
/*
* import React, { useState } from 'react';
import axios from 'axios';

const FeedbackForm = () => {
  const [feedback, setFeedback] = useState('');
  const [rating, setRating] = useState(0);
  const [file, setFile] = useState(null);
  const [isAnonymous, setIsAnonymous] = useState(false);
  const [confirmation, setConfirmation] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('/api/feedback', { feedback, rating, file, isAnonymous });
      setConfirmation('感谢您的反馈！');
      setFeedback('');
      setRating(0);
      setFile(null);
      setIsAnonymous(false);
    } catch (error) {
      console.error('Error submitting feedback:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">提交反馈</h2>
      <textarea
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        placeholder="请输入您的反馈"
        className="w-full p-2 mb-4 border border-gray-300 rounded"
      />
      <div>
        <label className="block mb-2">评分:</label>
        <input
          type="number"
          value={rating}
          onChange={(e) => setRating(e.target.value)}
          min="1"
          max="5"
          className="w-full p-2 border border-gray-300 rounded"
        />
      </div>
      <div>
        <label className="block mb-2">上传图片/视频:</label>
        <input
          type="file"
          onChange={(e) => setFile(e.target.files[0])}
          className="w-full p-2 border border-gray-300 rounded"
        />
      </div>
      <div className="mb-4">
        <label className="block mb-2">匿名提交:</label>
        <input
          type="checkbox"
          checked={isAnonymous}
          onChange={(e) => setIsAnonymous(e.target.checked)}
          className="mr-2"
        />
        匿名
      </div>
      <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
        提交
      </button>
      {confirmation && <p className="mt-4 text-green-500">{confirmation}</p>}
    </form>
  );
};

export default FeedbackForm;
*
* */